(function (doc, win) {
    var docEl = doc.documentElement,
    // 这段是为了获取移动端屏幕是否翻转：rientationchange事件手机是否横竖屏
    // ‘orientationchange’ in window
    // 这个是判断在window对象中是否有orientationchange属性，
    // 因为orientationchange会遇到兼容性问题，有的浏览器不支持，
    // 所以这边做了判断来决定是用orientationchange还是resize（思路就是用resizeEvt这个变量来控制用哪个，
    // 后面只要用resizeEvt这个变量来监听屏幕是否被调整）
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            //js获取当前设备的大小，document.documentElement.clientWidth
            var clientWidth = docEl.clientWidth;//获取设备的宽度
            // console.log(clientWidth)
            if (!clientWidth) return;
            if(clientWidth>=750){//宽度 > 750 平板 或者 桌面
                docEl.style.fontSize = '100px'; //根元素
                // document.documentElement.style.fontSize = '100px'
            }else{// 移动端的适配
                //html根元素的大小  100设计稿的html大小   750设计稿大小（根据设计稿变化）
                //测试设计稿大小：测量的值px px转rem  测量的值px/100=?rem  直接css里面写?rem即可
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//DOMContentLoaded 意思就是：当初始的 HTML 文档被完全加载和解析完成之后，
// DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
//load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件。

